<template>
  <div class="outer">
    <h1>我爱的电影列表</h1>
    <ul>
      <li v-for="item in myMovieList" :key="item.tvId">{{item.name}}</li>
    </ul>
    <br>
    <h1>选择你想要的电影</h1>
    
    <input type="text" placeholder="请输入关键词" v-model.lazy="search" >&nbsp;&nbsp;&nbsp;
     <button @click="searchMovie">搜索</button>&nbsp;&nbsp;
     <button @click="resetMovieList">重置</button>
    <ul>
      <li v-for="movie in searchMovieList " :key="movie.tvId">{{movie.name}}</li>
    </ul>
   
  </div>
</template>

<script>
import { mapGetters, mapState} from 'vuex'
export default {
    name:'Movie',
    data(){
      return {
        search:''
      }
    },
    computed:{
      // 普通使用
      // myMovieList(){
      //   console.log(this,'this');
      //   console.log(this.$store.getters.myMovieList,'myMovieList');
      //   return this.$store.getters.myMovieList
      // }
      ...mapState(['searchMovieList']),
      // 使用辅助函数
      ...mapGetters(['myMovieList'])
    },
    methods:{
       searchMovie(){
        this.$store.dispatch('getsearchMovieList',this.search)
        this.search=null
       },
       resetMovieList(){
          this.$store.commit('resetMovieList')
       }
    }
}
</script>

<style scoped>
.outer{
       text-align: center;
        background-color: pink;
    }
</style>